<template>
	<view class="change_box">
		<view class="m_h_box">
			<text class="m_h_title">{{hunList[marriedIndex]?hunList[marriedIndex].orgName:'当前无绑定人员'}}</text>
			<view class="m_h_r_box">
				<picker mode="selector" range-key="orgName" :value="marriedIndex" :range="hunList" @change="bindhunListSelectChange">
					<view class="change_btn">
						<text>切换</text>
						<image class="change_icon" src="/static/images/right.png" mode="scaleToFill"></image>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {queryMilkCardBalance} from '../common/api/index.js'
	export default {
		mounted() {
			this._queryMilkCardBalance()
		},
		props: {
			bindType: {
				type: [String, Number],
				default: "0"
			},
			type: {
				type: String,
				default: "o"
			}
		},
		data() {
			return {
				marriedIndex: 0,
				hunList: [],
				userList: [],
				orgId: 4501505,
				empId: '',
				frist: true
			}
		},
		methods: {
			bindhunListSelectChange: function(e) {
				console.log(e)
				this.marriedIndex = e.target.value
				this.orgId = this.hunList[e.target.value].orgId
				this.empId = this.hunList[e.target.value].empId
				this._queryMilkCardBalance()
			},
			_queryMilkCardBalance() {
				this.hunList = []
				this.userList = []
				uni.showLoading({
					title: '加载中...'
				})
				let s_userId = uni.getStorageSync('s_userId')
				queryMilkCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					orgId: this.orgId,
					bindType: this.bindType
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						let students = res.data.students
						console.log(students)
						this.userList = res.data.students
						if(this.type == 'o'){
							this.hunList = res.data.orgs
						}else {
							if(this.frist){
								this.empId = students[0].students[0].empId
								this.frist = false
							}
							students.forEach(item => {
								item.students[0].orgName = `${item.students[0].orgName}(${item.students[0].empName})`
								this.hunList.push(item.students[0])
							})
							this.hunList = this.hunList.filter(item => item.cards.length > 0 )
						}
						if(this.orgId == '') {
							this.orgId = res.data.orgs[0].orgId
						}
						this.$emit('listData', this.userList, this.orgId, this.empId)
					} else {
						uni.hideLoading()
						this.hunList = []
						this.userList = []
						this.$emit('listData', this.userList, this.orgId, this.empId)
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.change_box {
		width: 100vw;
		display: flex;
		justify-content: center;
	}
	.m_h_box {
		margin-top: 80rpx;
		width: 85%;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.38);
		box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.28);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 8rpx;
		padding: 0 26rpx;
	}
	.m_h_title {
		font-size: 30rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #FFFFFF;
	}
	.m_h_r_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: linear-gradient(180deg, #FFFFFF 0%, #E3E8FF 100%);
		border-radius: 30rpx;
		justify-content: center;
	}
	.uni-input {
		padding: 0;
		background: none;
	}
	
	.change_btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 52rpx;
		line-height: 52rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #E3E8FF 100%);
		border-radius: 32px;
		padding: 0 24rpx;
		color: #144DE8;
		font-size: 24rpx;
	}
	
	.change_icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>
